<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#onbox{
			width: 200px;
			height: 200px;
			background: red;
			float: left;
		}
		ul{
			width: 200px;
			float: right;
			list-style: none;
		}
		li{
			border:1px solid gray;
		}
		img{
			position: absolute;
			left: -1000px;
		}
	</style>
</head>
<body>
<img src="img/qq.png">
	<div id="onbox">接收</div>
	<ul id="oul">
		<li draggable="true">拖动0</li>
		<li draggable="true">拖动1</li>
		<li draggable="true">拖动2</li>
		<li draggable="true">拖动3</li>
		<li draggable="true">拖动4</li>
		
	</ul>
</body>
<script>
var oli=document.querySelectorAll("li");
var oimg=document.getElementsByTagName("img")[0];
for(var i=0;i<oli.length;i++){
	oli[i].index=i;
	oli[i].ondragstart=function(e){
		e.dataTransfer.setData('abc',this.index);//只要在原形上data你设置任意值，火狐视为可拖拽
		e.dataTransfer.setDragImage(oimg,0,0);//把拖拽时的影子替换成图标，图标必须在文档上可见，可定位到网页之外
	}
}

	onbox.ondragover=function(e){
		e.preventDefault();
	}
	onbox.ondrop=function(e){
		this.innerHTML="已回收第"+e.dataTransfer.getData('abc')+"个li";
		oul.removeChild(oli[e.dataTransfer.getData('abc')])
	}
</script>
</html>